<template>
    <div class="container">
        <div class="head-bar">
            <div class="bc-color-box"></div>
            <div class="tips-box">
                <img class="width-40 height-40" v-if="fileSpace" :src="fileSpace + '/images/success-icon-white.png'" alt="">
                <div class="font-18 font-white font-w mar-l-15">核销成功!</div>
            </div>
            <div class="info-box">
                <div class="info-content">
                    <div class="info-pay font-30 font-w mar-b-18">
                        <span class="font-16">￥</span>{{resData.actualPrice}}
                    </div>
                    <div class="mar-b-10 font-13 font-color-6">
                        <span class="width-70 label-content">订单编号：</span><span class="font-color">{{resData.orderNo}}</span>
                    </div>
                    <div class="mar-b-10 font-13 font-color-6">
                        <span class="width-70 label-content">下单时间：</span><span class="font-color">{{resData.createTime}}</span>
                    </div>
                    <div class="mar-b-10 font-13 font-color-6">
                        <span class="width-70 label-content">支付时间：</span><span class="font-color">{{resData.payTime}}</span>
                    </div>
                     <div class="mar-b-10 font-13 font-color-6">
                        <span class="width-70 label-content">订单状态：</span>
                        <span class="font-color" v-if="resData.orderStatus === 3">已核销</span>
                        <span class="font-color" v-else-if="resData.orderStatus === 4">已完成</span>
                    </div>
                    <div class="mar-b-10 font-13 font-color-6">
                       <span class="width-70 label-content">核销时间：</span><span class="font-color">{{resData.receivedTime}}</span>
                    </div>
                     <div class="font-13 font-color-6 pad-b-25">
                        <span class="width-70 label-content">核销员：</span><span class="font-color">{{nickname}}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="button-box font-15 flex flex-between">
          <button class="goback" @click="$pt.navigateBack()">继续核销</button>
          <button class="goback" @click="$pt.navigateTo({url:'/pages/order/delivery-detail/main?orderId=' + orderId})">查看详情</button>
        </div>
    </div>
</template>
<script>
import { getProjectOrder } from '@/api/distribution'
export default {
  data() {
    return {
      resData: {},
      memberStore: {},
      orderId: '',
      nickname: ''
    }
  },
  onShow() {
    this.orderId = this.getCurrentPage().query.orderId
    this.nickname = this.getNickName
    this.getOrderDetails()
  },
  methods: {
    back_click() {
      this.$pt.navigateBack({ delta: -2 })
    },
    getOrderDetails() {
      getProjectOrder(this.orderId).then((response) => {
        if (response.isError) return
        this.resData = response.data
        this.memberStore = response.data.memberStore
      }).catch(() => {
      })
    }
  }
}
</script>
<style lang="less" scoped>
@color-green: #20b675;
.head-bar{
    position: relative;
    background-size: 100% 30%;
    .bc-color-box{
        position: absolute;
        top: 0;
        left: 0;
        background: #24ba75;
        height: 160px;
        width: 100%;
    }
    .tips-box{
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 50px;
        padding-bottom: 36px;
    }
    .info-box{
        position: relative;
        width: 100%;
        .info-content{
            position: relative;
            background: url('https://veekrayimg.joinsun.vip/images/pay-success-img.png');
            background-size: 90% 100%;
            background-repeat: no-repeat;
            background-position-x: 50%;
            padding: 0 45px;
            .info-pay{
                padding: 40px 0 18px 0;
                border-bottom: 1px dashed #94a09b;
                text-align: center;
            }
        }
        .label-content{
            text-align: right;
            display: inline-block;
        }
    }
}
.button-box{
    margin-top: 35px;
    button{
        width: 150px;
        height: 42px;
        border: 1px solid @color-green;
        box-sizing: border-box;
        color: @color-green;
        background: white;
        line-height: 42px;
        text-align: center;
        border-radius: 20px;
        &::after{
            border: unset;
        }
    }
    .goback{
        color: white;
        background: @color-green;
    }
}
</style>
